<template>
	<view class="u-flex-1">
		<view class="u-flex">
			<u-input placeholder="按日期范围查询" v-model="label" clearable type="select" @click="show=true" />
			<view class="u-p-l-20" v-if="label">
				<u-icon name="close-circle" color="#999" @click="clear"></u-icon>
			</view>
		</view>
		<u-calendar v-model="show" mode="range" @change="change"></u-calendar>
	</view>
</template>

<script setup>
	const zoneId = defineModel()
	const show = ref(false)
	const label = ref('')
	const startDate = defineModel('startDate')
	const endDate = defineModel('endDate')
	
	const emit = defineEmits(['change','clear'])
	function change(e){
		console.log(e);
		label.value = e.startDate + ' 到 ' + e.endDate
		startDate.value = e.startDate
		endDate.value = e.endDate
		emit('change')
	}
	function clear(){
		label.value = ''
		startDate.value = ''
		endDate.value = ''
		emit('clear')
	}
</script>

<style>

</style>